<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="renderer" content="webkit" />
  <link rel="icon" href="/dist/oem/icon.png" type="image/x-icon">
  <title>{{.title}}</title>
</head>

<body>
  <div id="loader" class="loading-box">
    <style>
      .body {
        width: 100%;
        height: 100%;
        background-color: #ecf0f6;
      }

      .loading-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 800px;
      }

      .loading {
        position: relative;
        width: 64px;
        height: 64px;
        transform: rotateZ(45deg);
        border-radius: 5px;
        box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
        background-color: #fff;
      }

      .loading img {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 48px;
        height: 48px;
        transform: rotateZ(-45deg);
      }

      .spinner {
        position: absolute;
        top: -64px;
        left: -64px;
        margin: auto;
        box-sizing: border-box;
        background-clip: padding-box;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
        transform-origin: 50% 50%;
        transform: perspective(200px) rotateX(66deg) rotateY(-45deg);
        animation: spinner-wiggle 1.2s infinite;
      }

      .spinner:before,
      .spinner:after {
        content: "";
        position: absolute;
        margin: -4px;
        box-sizing: inherit;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        opacity: .05;
        border: inherit;
        border-color: transparent;
        animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
      }

      .spinner:before {
        border-top-color: #66e6ff;
      }

      .spinner:after {
        border-top-color: #f0db75;
        animation-delay: 0.3s;
      }

      @keyframes spinner-spin {
        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes spinner-fade {
        20% {
          opacity: .1;
        }

        40% {
          opacity: 1;
        }

        60% {
          opacity: .1;
        }
      }
    </style>
    <div class="loading">
      <img src="/dist/oem/icon.png" alt="">
      <div class="spinner">
      </div>
    </div>
  </div>
  </div>
  <div id="root"></div>
</body>

</html>